<template>
  <cjui-page-panel>
    <div class="flex justify-center">
      <div class="mb-24px mt-24px max-w-600px w-full text-center">
        <div class="text-[var(--el-color-primary)]">
          <cjui-icon icon="fa:comment-o" :size="32" />
        </div>
        <h5 class="mb-24px text-20px font-500"> Can't find what you are looking for? </h5>
        <p class="mb-24px text-14px text-[var(--el-text-color-secondary)]">
          If several languages coalesce, the grammar of the resulting language is more simple and
          regular than that of the individual languages.
        </p>
        <div>
          <el-button type="primary">Send us a tweet</el-button>
        </div>
      </div>
    </div>
    
    <el-row :gutter="48" class="p-24px">
      <el-col :span="12" :xs="24" class="mb-24px">
        <h5 class="text-16px">General Questions</h5>
        <el-collapse v-model="generalNames" accordion>
          <el-collapse-item title="Efficiency" name="3">
            <div> Simplify the process: keep operating process simple and intuitive; </div>
            <div>
              Definite and clear: enunciate your intentions clearly so that the users can quickly
              understand and make decisions;
            </div>
            <div>
              Easy to identify: the interface should be straightforward, which helps the users to
              identify and frees them from memorizing and recalling.
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-col>

      <el-col :span="12" :xs="24" class="mb-24px">
        <h5 class="text-16px">Pricing & Plans</h5>
        <el-collapse v-model="plansNames" accordion>
          <el-collapse-item title="Efficiency" name="3">
            <div> Simplify the process: keep operating process simple and intuitive; </div>
            <div>
              Definite and clear: enunciate your intentions clearly so that the users can quickly
              understand and make decisions;
            </div>
            <div>
              Easy to identify: the interface should be straightforward, which helps the users to
              identify and frees them from memorizing and recalling.
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-col>
    </el-row>
  </cjui-page-panel>
</template>

<script lang="ts" setup>
// import { breadcrumbStore } from '@/store/modules/breadcrumb'

const generalNames = ref([])
const plansNames = ref([])

onMounted(() => {
  // breadcrumbStore.buildBreadcrumbDic()
})
</script>

<style lang="scss" scoped>
:deep(.el-collapse-item__header) {
  font-weight: bold;
}

:deep(.el-collapse-item__content) {
  color: var(--el-text-color-secondary);
}
</style>
